<template>
  <div class="van-overlay flex flex-center" @click="close">
    <img :src="src" class="preview-img">
  </div>
</template>

<script>
import { ref, computed } from 'vue';
export default {
  props: {
    imgSrc: {
      type: String,
      default: ''
    },
    onClose: {
      type: Function,
      default: () => {}
    }
  },
  setup(props) {
    const show = ref(true);
    const src = computed(() => props.imgSrc);
    const close = () => {
      props.onClose();
      window.removeEventListener('popstate', close, false);
    };

    window.addEventListener('popstate', close, false);

    return { show, src, close };
  }
};
</script>

<style lang="scss">
.preview-img {
  width: 100%;
}
</style>